<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>设计目标</h2>
  <div>Vue3 经过长达两三年时间的筹备，做了哪些事情？</div>
  <ul>
    <li>更小</li>
    <li>更快</li>
    <li>TypeScript支持</li>
    <li>API设计一致性</li>
    <li>提高自身可维护性</li>
    <li>开放更多底层功能</li>
  </ul>
  <h4>更小</h4>
  <div>引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了</div>
  <h4>更快</h4>
  <div>diff算法优化,静态提升,事件监听缓存,SSR优化</div>
  <h4>更友好</h4>
  <div>VUE3是基于typescipt编写的，可以享受到自动的类型定义提示</div>
  <h2>三、优化方案</h2>
  <div>vue3从很多层面都做了优化，可以分成三个方面：</div>
  <ul>
    <li>源码</li>
    <li>性能</li>
    <li>语法 API</li>
  </ul>
  <h4>性能</h4>
  <div>在vue2中，数据劫持是通过Object.defineProperty，这个 API 有一些缺陷，并不能检测对象属性的添加和删除。尽管Vue为了解决这个问题提供了 set和delete实例方法，但是对于用户来说，还是增加了一定的心智负担。相比之下，vue3是通过proxy监听整个对象，那么对于删除还是监听当然也能监听到。同时Proxy 并不能监听到内部深层次的对象变化，而 Vue3 的处理方式是在getter 中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归</div>
  <h4>语法 API composition API</h4>
  <div>相同功能的代码编写在一块。</div>
  <br>
  <div>在vue2中，我们是通过mixin实现功能混合，如果多个mixin混合，会存在两个非常明显的问题：命名冲突和数据来源不清晰,而通过composition这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可</div>
</body>
</html>